<template>
  <div class="loginContainer">
    <el-button plain type="text" style="position:absolute;left:20px;top:20px;font-size:18px;" @click="back">返回</el-button>
    <div class="formBOX">
      <div style="font-weight:600;font-size:24px;margin-bottom:20px;">three.js的使用</div>
      <canvas id="three"></canvas>
    </div>
  </div>
</template>
<!-- three.js -->
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import * as THREE from 'three'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

// 创建场景
const initThree = () => {
  const scene = new THREE.Scene()
  scene.background = new THREE.Color('#eee')
  // scene.fog = new THREE.Fog('#eee', 10000, 100000)

  const canvas = document.getElementById('three')
  const renderer = new THREE.WebGLRenderer({ canvas, antialias: true })
  renderer.shadowMap.enabled = true

  const camera = new THREE.PerspectiveCamera(
    50,
    window.innerWidth / window.innerHeight,
    1,
    1000
  )

  camera.position.z = 10

  const gltfLoader = new GLTFLoader()
  gltfLoader.load('/threeDemo/scene.gltf', (gltf: any) => {
    let model = gltf.scene
    scene.add(model)
  })

  const hemLight = new THREE.HemisphereLight(0xffffff, 0x080820, 0.6)
  hemLight.position.set(0, 48, 0)
  scene.add(hemLight)

  const dirLight = new THREE.DirectionalLight(0xffffff, 0.6)
  //光源等位置
  dirLight.position.set(-10, 8, -5)
  //可以产生阴影
  dirLight.castShadow = true
  dirLight.shadow.mapSize = new THREE.Vector2(1024, 1024)
  scene.add(dirLight)

  let floorGeometry = new THREE.PlaneGeometry(8000, 8000)
  let floorMaterial = new THREE.MeshPhongMaterial({
    color: 0x857ebb,
    shininess: 0,
  })

  // 辅助坐标系
  let axishelper = new THREE.AxesHelper(250)
  scene.add(axishelper)

  // 辅助相机
  // const helper = new THREE.CameraHelper(camera)
  // scene.add(helper)

  // 坐标格辅助对象
  const size = 10;
  const divisions = 10;
  const gridHelper = new THREE.GridHelper(size, divisions)
  scene.add(gridHelper)

  // 极坐标格辅助对象
  // const radius = 10
  // const sectors = 16
  // const rings = 8
  // const divisions = 64
  // const helper = new THREE.PolarGridHelper( radius, sectors, rings, divisions )
  // scene.add( helper )

  let floor = new THREE.Mesh(floorGeometry, floorMaterial)
  floor.rotation.x = -0.5 * Math.PI
  floor.receiveShadow = true
  floor.position.y = -0.001
  scene.add(floor)

  const controls = new OrbitControls(camera, renderer.domElement)
  controls.enableDamping = true

  // 时钟对象
  // const clock = new THREE.Clock()

  function animate() {
    // 渲染循环

    // 渲染间隔
    // const spt = clock.getDelta() * 1000
    // console.log(spt);

    // 轨道控制器旋转，autoRotateSpeed默认值为2.0，autoRotate为true时生效，旋转一周30s，生效时必须调用update()
    // controls.autoRotate = true
    // controls.autoRotateSpeed = 6.0

    // 轨道控制器旋转，dampingFactor默认值为0.05，enableDamping为true时生效阻尼（惯性），这将给控制器带来重量感，生效时必须调用update()
    // controls.enableDamping = true 
    // controls.dampingFactor = 0.5

    controls.update()
    renderer.render(scene, camera)
    requestAnimationFrame(animate)

    if (resizeRendererToDisplaySize(renderer)) {
      const canvas = renderer.domElement
      camera.aspect = canvas.clientWidth / canvas.clientHeight
      camera.updateProjectionMatrix()
    }
  }
  animate()

  function resizeRendererToDisplaySize(renderer) {
    const canvas = renderer.domElement
    var width = window.innerWidth
    var height = window.innerHeight
    var canvasPixelWidth = canvas.width / window.devicePixelRatio
    var canvasPixelHeight = canvas.height / window.devicePixelRatio

    const needResize =
      canvasPixelWidth !== width || canvasPixelHeight !== height
    if (needResize) {
      renderer.setSize(width, height, false)
    }
    return needResize
  }
}

onMounted(() => {
  initThree()
})

const back = async () => {
  window.history.back()

}
</script>
<style lang="scss" scoped>
.loginContainer {
  height: 100vh;
  width: 100vw;
  padding: 60px;
  margin-bottom: 10px;
  cursor: pointer;
  box-sizing: border-box;
}

#three {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}
</style>
